function ubi_dialog (id, w, h, title, content) {
    this.id = id;
    this.w = w;
    this.h = h;
    this.content = content;
    this.title = title;
    this.set_content =function (content) {
        this.content = content;
        $(this.dialog_layout).find('.ubi-dialog-content').html(this.content)
    };
    this.set_size = function (w, h) {
        this.w = w;
        this.h = h;
        $(this.dialog_layout)
            .css('height', this.h).css('width', this.w)
    };
    this.set_pos = function (t, l) {
        this.t = t;
        this.l = l;
        $(this.dialog_layout)
            .css('top', this.t).css('left', this.l)
    };
    this.set_title= function(title) {
        this.title = title;
    }

    this.show = function () {
        $(this.mask_layout).show();
        $(this.dialog_layout).show();
    };
    this.hide = function () {
        $(this.dialog_layout).hide();
        $(this.mask_layout).hide();
    };
    this.create = function () {
        $(document.body).append(
    '<div id="' + id + '-ubi-dialog" class="ubi-dialog-frame">'
   +     '<div class="ubi-dialog-title-bar">'
   +         '<div class="ubi-dialog-title" style="float:left;padding:6px 10px 0"></div>'
   +         '<div style="float:right;padding:6px 10px 0"><a title="Close" class="ubi-dialog-close-btn" href="#" ><img style="border:0" src="imgs/icons/22x22/close.png"/></a></div>'
   +     '</div>'
   +     '<div class="ubi-dialog-content"></div>'
   + '</div>'
   + '<div id="'+id+'-ubi-dialog-mask-layout" class="ubi-dialog-mask"></div>'
        );
        this.mask_layout = $('#'+id+'-ubi-dialog-mask-layout').get(0);
        this.dialog_layout = $('#'+id+'-ubi-dialog').get(0);
        var _this = this;
        $(this.dialog_layout).find('.ubi-dialog-close-btn').click(
            function (){
                _this.hide();
            })
        
    };


    this.create();
}
